{{ block title }}
{{ endblock }}
{{ block content }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ C.TABLE_STYLE }}
<table>
    <tr> <th> 请观察股票价格走势,根据您对K线图的理解做出判断 </th> </tr>
    <tr><td>
<div id="container" style="height: 40vh;  width: {% if num_days == 5 %}50%{% elif num_days == 7 %}70%{% elif num_days == 10 %}100%{% else %}100%{% endif %}"></div>
<script src="{% static 'js/highstock.js' %}"></script>
<!--        <script src="http://code.highcharts.com/stock/9.3.3/highstock.js"></script>-->
<script>
Highcharts.stockChart('container', {
            chart: {
                backgroundColor: '#FFFFFF',
                style: {
                    fontFamily: 'Arial, sans-serif'
                }
            },
            xAxis: {
                gridLineWidth: 0, // 去除 x 轴网格线
<!--                type: 'datetime',-->
<!--                tickColor: '#333333',-->
                labels: {
                    enabled: false
                },
            },
            yAxis: {
                labels: {
                    enabled: false
                },
            },
            tooltip: {
                enabled: false
            },
            legend: {
                enabled: false
            },
             navigator: {
                enabled: false
            },
            rangeSelector: {
                enabled: false  // 禁用范围选择器
            },
             scrollbar: {
                enabled: false  // 禁用滚动条
            },
            plotOptions: {
                candlestick: {
                    color: 'green',
                    upColor: 'red',
                    lineColor: 'green',
                    upLineColor: 'red',
                    fillColor: 'rgba(0, 0, 0, 0)',
                    upFillColor: 'rgba(0, 0, 0, 0)'
                }
            },
            series: [{
                type: 'candlestick',
                data: {{ stock_data|safe }}
            }]
        });
</script>
{{ formfields }} </td>
    </tr>
    <tr> <td> {{ next_button }} </td> </tr>

</table>
{{ endblock }}
